<script setup lang="ts" name="TodoItem">
type Task = {
  id: string;
  name: string;
  done: boolean;
};

interface IProps {
  task: Task;
}

const props = defineProps<IProps>();

const changeStatus = (id: string) => {
  emit('changeStatus', id);
};

const deleteTask = (id: string) => {
  console.log(id);
  emit('deleteTask', id);
};

const emit = defineEmits(['changeStatus', 'deleteTask']);
</script>

<template>
  <div class="todo-item">
    <input type="checkbox" id="check" :class="{ checked: props.task.done }" />
    <label for="check" @click="changeStatus(props.task.id)"></label>

    <div class="content">
      <p>
        {{ props.task.name }}
      </p>
    </div>
    <span class="delete" @click="deleteTask(props.task.id)">
      <svg
        t="1685443256365"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4708"
        width="200"
        height="200"
      >
        <path
          d="M744.727273 279.272727v558.545455a23.272727 23.272727 0 0 1-23.272728 23.272727H302.545455a23.272727 23.272727 0 0 1-23.272728-23.272727V279.272727h465.454546m69.818182-69.818182H209.454545v628.363637a93.090909 93.090909 0 0 0 93.09091 93.090909h418.90909a93.090909 93.090909 0 0 0 93.09091-93.090909V209.454545z"
          fill="#d81e06"
          p-id="4709"
        ></path>
        <path
          d="M430.545455 768a34.909091 34.909091 0 0 1-34.909091-34.909091v-279.272727a34.909091 34.909091 0 0 1 69.818181 0v279.272727a34.909091 34.909091 0 0 1-34.90909 34.909091zM593.454545 768a34.909091 34.909091 0 0 1-34.90909-34.909091v-279.272727a34.909091 34.909091 0 0 1 69.818181 0v279.272727a34.909091 34.909091 0 0 1-34.909091 34.909091zM884.363636 279.272727H139.636364a34.909091 34.909091 0 0 1 0-69.818182h744.727272a34.909091 34.909091 0 0 1 0 69.818182z"
          fill="#d81e06"
          p-id="4710"
        ></path>
        <path
          d="M613.236364 162.909091l5.818181 46.545454h-214.10909l5.818181-46.545454h202.472728m20.48-69.818182H390.283636a46.545455 46.545455 0 0 0-46.545454 40.727273L325.818182 279.272727h372.363636l-18.152727-145.454545a46.545455 46.545455 0 0 0-46.545455-40.727273z"
          fill="#d81e06"
          p-id="4711"
        ></path>
      </svg>
    </span>
  </div>
</template>

<style lang="scss" scoped>
.todo-item {
  display: flex;
  column-gap: 16px;
  padding: 14px 16px;
  background-color: #fff;
  border-radius: 14px;
  align-items: center;
  box-shadow: 0 3px 8px rbga(0, 0, 0, 0.15);
  cursor: pointer;

  &:not(:last-child) {
    margin-bottom: 16px;
  }

  .content {
    flex: 1;
    position: relative;
    flex-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    p {
      position: relative;
      max-width: max-content;
      text-overflow: ellipsis;
      color: rgba(0, 0, 0, 0.8);
    }

    p::before {
      position: absolute;
      content: '';
      width: 0;
      height: 1px;
      top: 50%;
      background-color: rgb(39, 39, 43);
      opacity: 0;
      transition: all 0.5s;
    }
  }

  label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background-color: #e9ecef;
    cursor: pointer;
    transition: all 0.5s ease;
  }

  input.checked ~ label {
    background-color: #27272b;
  }

  input.checked ~ .content p::before {
    width: 100%;
    opacity: 1;
  }

  input {
    display: none;
  }

  .delete {
    svg {
      width: 20px;
      height: 20px;
    }
    cursor: pointer;
    opacity: 0;
    transition: all 0.5s;
  }

  &:hover {
    .delete {
      opacity: 1;
    }
  }
}
</style>
